<template>
  <div class="saler_list">
    <!--<el-button v-if="showSync" class="btn_sync" @click="handleSyncUser" :loading="loading">重新同步</el-button>-->
    <div class="saler_list_main">
      <div class="group_list" :style="{width: showUser ? '50%' : '100%'}">
        <el-input v-model="branch" placeholder="搜索架构" @keyup.enter.native="handleFilterBranch">
          <el-button slot="append" @click="handleFilterBranch">搜索</el-button>
        </el-input>
        <el-tree
          ref="tree"
          :data="branches"
          :props="{label:'name', children: 'child'}"
          node-key='id'
          :filter-node-method="filterTree"
          :default-expanded-keys="expandKey"
          @node-click="handleNodeClick">
        </el-tree>
      </div>
      <div v-if="showUser" class="user_list">
        <el-input v-model="username" placeholder="搜索员工" @keyup.enter.native="handleSearchUser">
          <el-button slot="append" @click="handleSearchUser">搜索</el-button>
        </el-input>
        <div v-for="item, n in users" class="user_item" :class="{user_item_selected: isSelected(item)}" @dblclick="$emit('onSelectUser', item)">
          <!--<img class="avatar" :src="item.avatar||''" alt="">-->
          <i class="el-icon-circle-check"></i>
          <span>{{item.username}}-{{ item.departmentName }}</span>
          <el-button v-show="showAuth" v-if="item.status === 0" class="fr" type="primary" size="mini"
                     @click="handleAuth(item, 1)">授权登录
          </el-button>
          <el-button v-show="showAuth" v-if="item.status === 1" class="fr" size="mini" @click="handleAuth(item, 0)">
            取消授权
          </el-button>
        </div>
        <el-button size="mini" v-show="showCheckedAll && users && users.length" @click="handleCheckedAll" style="margin-top: 30px;">全选</el-button>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            :current-page.sync="page.current"
            :page-size.sync="page.size"
            layout="total, prev, pager, next"
            :total.sync="page.total"
            :page-sizes="[10, 30, 50, 100]"
            @current-change="handleSearchUser()"
            @size-change="handleSizeChange">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'

  export default {
    props: {},
    data() {
      return {
        branch: '',
        username: '',
        page: {
          current: 1,
          size: 50,
          total: 0,
          pages: 0
        },
        filterBranch: [],
        expandKey: [3],
        selGroup: null,
        dialog: false,
        loading: false,
        departmentId: 0,
        checkedAll: false
      }
    },
    props: {
      showAuth: {type: Boolean, default: true},
      showSync: {type: Boolean, default: true},
      showUser: {type: Boolean, default: true},
      showCheckedAll: {type: Boolean, default: false},
      selected: {type: Array, default: () => []}
    },
    mounted() {
      this.getBranchList()
    },
    computed: {
      ...mapState({
        branches: state => state.sysManage.branches,
        users: state => state.sysManage.branchUsers.list
      })
    },
    methods: {
      ...mapActions(['getBranchList', 'getBranchUser', 'getBranchUser2', 'syncBranchUser', 'authBranchUser']),
      isSelected(user) {
        return this.selected.findIndex(item => item.userId === user.userId) > -1
      },
      filterTree(value, data) {
        if (!value) {
          return true
        }
        return data.name.indexOf(value) !== -1
      },
      handleFilterBranch() {
        this.$refs.tree.filter(this.branch)
      },
      handleNodeClick(obj) {
        this.departmentId = obj.id
        if (this.showUser) {
          this.getBranchUser(obj.id).then((res) => {
            this.page = res.data.data.page
          })
        }
        this.$emit('onSelectGroup', obj)
      },
      handleCheckedAll(value) {
        value && this.$emit('checkedAll', this.$_.cloneDeep(this.users))
      },
      handleSearchUser() {
        this.departmentId = 0
        this.page.size = 50
        this.getBranchUser2({username: this.username, size: this.page.size, page: this.page.current}).then((res) => {
          this.page = res.data.data.page
        })
      },
      handleSizeChange(size) {
        this.page.size = size
        this.handleSearchUser()
      },
      async handleSyncUser() {
        this.loading = true
        try {
          const res = await this.syncBranchUser()
          if (res.data.code === 1) {
            this.$message('success', res.data.msgZ)
          }
        } catch (e) {
          this.loading = false
        }
      },
      async handleAuth(obj, status) {
        this.cur = obj
        const res = await this.authBranchUser({userId: obj.userId, status: status})
        if (res.data.code === 1) {
          if (this.departmentId === 0) {
            this.handleSearchUser()
          } else {
            this.getBranchUser(this.departmentId).then((res) => {
              this.page = res.data.data.page
            })
          }
          this.$message.success('成功')
        }
      },
      async handleSelectGroup() {
        if (!this.selGroup) {
          this.$message.warning('请选择架构')
          return false
        }
        const res = await this.authBranchUser({userId: this.cur.userId, status: 1, departmentId: this.selGroup})
        if (res.data.code === 1) {
          this.$message.success('成功')
          this.dialog = false
          this.selGroup = null
        }
      }
    }
  }
</script>
<style lang="scss">
  .saler_list {
    .btn_sync {
      margin-bottom: 15px;
    }
    .saler_list_main {
      display: flex;
    }
    .group_list {
      & {
        margin-right: 10px;
        padding: 15px;
        width: 50%;
        border: 1px solid #D1DBE5;
      }
      .el-input {
        width: 60%;
        margin-bottom: 15px;
      }
    }
    .user_list {
      & {
        padding: 15px;
        min-width: 420px;
        max-width: 500px;
        border: 1px solid #D1DBE5;
      }
      .el-input {
        margin-bottom: 15px;
      }
      .user_item {
        & {
          padding: 5px;
          border-bottom: 1px solid #d1dbe5;
          line-height: 2;
          cursor: pointer;
        }
        &.user_item_selected {
          color: #ccc;
          i{
            display: inline-block;
          }
        }
        i{
          display: none;
        }
        button {
          margin-left: 10px;
        }
        .avatar {
          margin-right: 3px;
          width: 24px;
          height: 24px;
          border: 1px solid #ddd;
        }
      }
    }
  }
</style>
